<template>
  <div>
    <div class="wrap">
      <bread-crumb></bread-crumb>
      <h1>带头像的所有学生信息</h1>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          height="500px"
          @row-click="goDetail"
        >
          <el-table-column prop="stu_id" label="学号" width="100">
          </el-table-column>
          <el-table-column prop="stu_name" label="姓名" width="100">
          </el-table-column>
          <el-table-column prop="stu_sex" label="性别" width="100">
          </el-table-column>
          <el-table-column prop="stu_date" label="出生日期" width="180">
            <!-- scope.row 拿到当前行的数据对象
            scope.$index  拿到当前行的下标
            
             -->
            <template slot-scope="scope">
              <!-- <p></p> -->
              <p>{{ scope.$index }}</p>
              <p>{{ $moment(scope.row.stu_date).format("YYYY-MM-DD") }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="stu_head_img" label="头像">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.stu_head_img"
                :preview-src-list="srcList"
                @click="bigImage(scope.row.stu_head_img)"
              >
              </el-image>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="currentChange"
        >
        </el-pagination>
        <el-button @click="$router.push({ name: 'allStuInfoHeaderHou' })"
          >测试后台分页的写法</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { req_all_stu_info } from "@/api/stuInfo.js";
export default {
  async mounted() {
    let result = await req_all_stu_info();
    // 分页
    // 分页  真分页  服务器一组组返回数据
    // 分页 假分页  服务器当中所有的学生信息请求回来 在前台进行分页这种称谓假分页

    // 当数据量大的时候都是真分页  100
    // 一页可能只展示50条

    console.log(result);
    // 当请求回来数据之后将数据赋值给tableData
    this.tableData = result.data;
    // 请求回来的数组的长度为分页当中的总条数
    this.total = result.data.length;
    // 73  一页5条   14 余 3
    this.totalData = result.data;

    // 注意问题 当前table当中渲染的数据还73    tableData  result.data
    //如果想让table当中显示5条数据  让tableData为5条数据即可

    //默认上来 第一页 （当前页码-1）* 每一页有多少条（5），当前页码* 每一页有多少条
    this.tableData = this.totalData.slice(
      (this.currentPage - 1) * this.pageSize,
      this.currentPage * this.pageSize
    );

    console.log(this.$moment("2022-07-05T07:18:03.312Z").format("YY-MM-DD"));
  },
  data() {
    return {
      tableData: [],
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      total: 0, //数据的总条数
      pageSize: 5, //5条数据一页
      totalData: 0, //请求回来的全部数据
      currentPage: 1, //当前页码
    };
  },
  methods: {
    currentChange(value) {
      // console.log(value);
      this.tableData = this.totalData.slice(
        (value - 1) * this.pageSize,
        value * this.pageSize
      );
    },
    bigImage(value) {
      console.log(value);
      this.srcList[0] = value;
    },
    goDetail(row, column, event) {
      console.log(row, column, event);
      // 进行路由跳转是随便跳转的吗？
      // 不是 除了点击头像 其他都进行跳转
      console.log(event.target.tagName);
      if (event.target.tagName != "IMG") {
        this.$router.push({
          name: "stuDetail",
          query: {
            stuInfoDetail: JSON.stringify(row),
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
div {
  .wrap {
    height: 30px;
  }
}
</style>